<template>
  <div ref="root" @click="popup" style="position: relative;width: 100%;height: 100%;">
    <div class="inputArea">
      <div v-if="selectValues && selectValues.length>0" style="text-align: left;border-bottom: 1px solid var(--disable-color);">
        <div v-for="(item, index) in selectValues" :key="item[fields.value]" class="selectItem">
          <span>{{ item[fields.text] }}</span>
          <span @click="removeSelectItem(index)">
            <svg width="10" height="10" style="cursor: pointer;"  viewBox="0 0 5 5" >
              <path style="fill:#b7eb8f" d="M 4.7360274,4.257576 4.2597807,4.7338228 2.6414236,3.1154657 1.031886,4.7338228 0.55563919,4.257576 2.1784059,2.6480383 0.55563919,1.0296813 1.031886,0.5578442 2.6414236,2.1762013 4.2641904,0.5578442 4.7360274,1.034091 3.1176704,2.6480383 Z" id="text1" aria-label="×" />
            </svg>
          </span>
        </div>
      </div>
      <JInput ref="inputBox" :readonly="true" :value="inputValue" @blur="bluro" @clear="clearValue" :showBorder="false">
        <div slot="suffix" style="font-size: 0.2em;display: flex;justify-content: center;align-items: center;" >
            <svg width="15" height="15" viewBox="0,-2.5,10,10" style="vertical-align:middle;">    
                <polygon points="1,0 1,5 4,2.5" transform="translate(7.5,0) rotate(90)" fill="var(--theme-primary-color)" stroke-width="0"/>
            </svg>
        </div>
      </JInput>
    </div>
    <div v-show="showpopup" ref="items"  style="position: absolute;width: 100%;" >
      <div class="popup" :style="getPopStyle()"
      >
        <div v-for="(item) in dataSource" :key="item[fields.value]" :value="item[fields.value]" style="font-size: 0.8em;" class="item" @click="(events)=>selectItem(events,item)" >
            {{ item[fields.text] }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import JInput from "../JInput/JInput.vue"
export default {
  components:{
    JInput,
  },
  data() {
    return {
      showpopup:false,
      selectValues:[],
      isFocused:false,
      resultValue:'',
      inputValue:""
    }
  },
  props:{
    value:{        
      default:''
    },
    fields:{
        type:Object,
        default:()=>{
          return {
            text:'label',
            value:'value',
            child:'child'
          }
        }
    },
    dataSource:{
        type: Array,
        default:()=>{
          return []
        }
    }
  },
  mounted(){    
    if(this.value)
    {
      let optionValues = this.value.split(',')
      optionValues.forEach(v=>{
        let curOption = this.dataSource.filter(t=>t[this.fields.value] == v);
        if(curOption.length>0)
        {
          this.selectValues.push(curOption[0]);
        }        
      })
      this.resultValue = this.value;
    }
          this.selectValues.push(this.dataSource[0])

  },
  methods:{
    popup(){      
      this.$refs.inputBox.focus()
      this.showpopup=true;
    },
    bluro(e){      
      console.log('bruro',e)
      if(!this.showpopup)
      {
        this.$emit('blur',e);
      }else{
        setTimeout(()=>{
          this.showpopup=false;
          this.$emit('blur',e);
        },300)
      }
    },
    getPopStyle(){
      // return `height:${this.dataSource.length * 24+ 10}px;`
      return `max-height:300px;`;
    },
    selectItem(e,item){
      e.preventDefault();      
      const VALUETEXT = this.fields.value;
      if(this.selectValues.indexOf(item)<0)
      {
        this.selectValues.push(item);
        this.resultValue = this.selectValues.map(t=>t[VALUETEXT]).join(',');
        this.$emit('update:value',this.resultValue)    
        this.showpopup = false;
        this.$refs.inputBox.focus()
      }
    },
    removeSelectItem(index,item){
      this.selectValues.splice(index,1)
    },
    clearValue(){
      this.selectValues.length = 0 ;
      this.resultValue = '';      
    },
    expand(item){
      this.$set(item,'__expand',!item.__expand);            
    },
  }
}
</script>
<style>
:root{
    --primary-color: var(--theme-primary-color, #0066ff);
}
</style>
<style scoped>
.inputArea{
    border: 1px solid var(--disable-color);
    border-radius: var(--theme-border-radius,2px);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    background-color: white;
}

.inputArea:focus-within{
    border: 1px solid var(--primary-color);
}
.mainSelect{
    height: 1.5em;
    border: 1px solid var(--primary-color);
    border-radius: 2px;
    outline: none;
    width:100%;
}
select::-webkit-select-popup {
  background-color: rgb(40, 237, 145);
  border: 1px solid #ccc;
}
.item{
  cursor: pointer;
  position: relative;
  text-align: left;
  padding-left: 5px;
  height: 24px;
  display: block;
}
.item:hover{
  background-color: var(--primary-color,#0066ff);
  color:var(--theme-obprimary-color, white);
}
.itemtext{
  padding-left: 3px;
  white-space:nowrap;

}
.selectItem{
  display: inline-block;
  border: 1.5px solid #b7eb8f;
  border-radius: 2px;
  background: #f6ffed;
  color: #262626;
  padding: 0px 2px;
  height: 24px;
  line-height: 24px;
  font-size: xx-small;
  margin: 1px;
}
.popup{
  overflow:auto;
  position: relative;
  z-index: 9999;
  width:100% ;
  background-color: white;
  outline: 1px solid black;
  box-sizing: border-box;
}
</style>